<template>
    <view class="detail-main">
        <view class="detail-title">{{ detail?.stationName }}</view>
        <view class="list-top">
            <view class="list-top-left">
                <view class="title">
                    <view class="more-left">
                        ¥{{ detail?.price?.toFixed(2) }}/度
                    </view>
                </view>
            </view>
            <view class="list-top-right">
                <view class="tip">
                    <text v-if="detail?.isToilet == 1">卫生间 | </text>
                    <text v-if="detail?.isMeal == 1">简餐 | </text>
                    <text v-if="detail?.isStore == 1">便利店</text>
                </view>
            </view>

        </view>
        <view class="detail-war">
            <view class="public" v-if="detail?.isStore == 1">
                <view class="public-icon">
                    <image src="/static/icon/time.png" mode="scaleToFill" />
                </view>
                <view class="public-status">
                    <view class="public-status-text">{{ isOnline ? '营业中' : '休息中' }}</view>
                    <view class="public-status-text">{{ detail?.storeHours }}</view>
                </view>
            </view>
            <view class="public" v-if="detail?.parkType">
                <view class="public-icon">
                    <image src="/static/icon/tc.png" mode="scaleToFill" />
                </view>
                <view class="public-status">
                    <view class="public-status-text">停车信息</view>
                    <view class="public-status-text">{{ detail?.parkType }}</view>
                </view>
            </view>
        </view>
        <view class="b-box">
            <view class="address">{{ detail?.stationAddr }}</view>
            <view class="list-top-right" @click.stop="goToMapFn()">
                <view class="d-icon">
                    <image src="/static/icon/dh.png" mode="scaleToFill" />
                </view>
                <view class="km">{{ detail?.distance }}km</view>
            </view>
        </view>
        <view class="battery battery-one">
            <view class="battery-number">
                <view class="k-number">{{ detail?.usableNum || 0 }} / {{ detail?.countNum || 0 }}</view>
                <view class="k-title">可用电池</view>
            </view>
        </view>
        <view class="battery battery-two" @click="goToBatteryDetail(item)">
            <view class="b-left">正在充电</view>
            <view class="b-middle">
                <view class="b-item" v-for="(item, index) in batteryList" :key="index">
                    <view class="d-item">
                        <Battery :showPercent="false" :showTip="true" :percent="item.value" :tip="item.tip"
                            :color="'#55946d'" />
                        <view class="d-number">{{ item.num || 0 }}</view>
                    </view>
                </view>
            </view>
            <view class="b-right">
                <wd-icon name="arrow-right" size="22px" color="#55946d"></wd-icon>
            </view>
        </view>
    </view>
</template>

<script setup>
import { goToMap } from '@/utils/tools'
import Battery from '@/components/battery/Battery.vue'
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { stationDetail } from '@/api/apiList'
import { ref } from 'vue'



const batteryList = ref([
    { value: 90, tip: '≥95%', num: '' },
    { value: 80, tip: '80~95%', num: '' },
    { value: 70, tip: '70~80%', num: '' }
])

const shareConf = ref({
    title: '',
    path: '',
})
const detail = ref({})
let isOnline = ref(false)
const getDetail = async (stationNo) => {
    const res = await stationDetail({
        stationNo,
        latitude: JSON.parse(uni.getStorageSync('position')).position.latitude,
        longitude: JSON.parse(uni.getStorageSync('position')).position.longitude,
    })
    if (res.code == 200) {
        detail.value = res.data
        shareConf.value.title = detail.value.stationName
        shareConf.value.path = `/pages/index/indexListDetail?stationNo=${detail.value.stationNo}&latitude=${detail.value.latitude}&countNum=${detail.value.countNum}&usableNum=${detail.value.usableNum}`
        if (detail.value?.storeHours) {
            let timeList = detail.value?.storeHours.split('~')
            isOnline.value = isCurrentTimeInRange(timeList[0], timeList[1])
        }
        batteryList.value[0].num = detail?.value?.batteryInfoVO?.bigNinetyFiveCount
        batteryList.value[1].num = detail?.value?.batteryInfoVO?.smallNinetyFiveCount
        batteryList.value[2].num = detail?.value?.batteryInfoVO?.eightyCount
    }
}

const isCurrentTimeInRange = (startTime, endTime) => {
    const now = new Date();
    const currentHours = now.getHours();
    const currentMinutes = now.getMinutes();

    // 将时间字符串转换为小时和分钟
    const [startHours, startMinutes] = startTime.split(':').map(Number);
    const [endHours, endMinutes] = endTime.split(':').map(Number);

    // 将当前时间转换为总分钟数便于比较
    const currentTotalMinutes = currentHours * 60 + currentMinutes;
    const startTotalMinutes = startHours * 60 + startMinutes;
    const endTotalMinutes = endHours * 60 + endMinutes;

    return currentTotalMinutes >= startTotalMinutes &&
        currentTotalMinutes <= endTotalMinutes;
}

let latitude = ref('')
let longitude = ref('')
let countNum = ref(0)
let usableNum = ref(0)
let stationNo = ref('')
onLoad((option) => {
    latitude.value = option.latitude
    longitude.value = option.longitude
    countNum.value = option.countNum
    usableNum.value = option.usableNum
    stationNo.value = option.stationNo
    getDetail(option.stationNo)
})

onShareAppMessage(() => {
    if (shareConf.value.title && shareConf.value.path) {
        return shareConf.value
    }
})

onShareTimeline(() => {
    if (shareConf.value.title && shareConf.value.path) {
        return shareConf.value
    }
})

// 跳转地图
const goToMapFn = () => {
    goToMap(Number(detail.value?.latitude), Number(detail.value?.longitude), detail.value.stationName, detail.value.stationAddr)
}

// 跳转电池详情
const goToBatteryDetail = () => {
    uni.navigateTo({
        url: `/pages/index/batteryDetail?stationNo=${stationNo.value}`
    })
}
</script>

<style lang="scss" scoped>
.detail-main {
    padding: 30rpx;

    .detail-title {
        font-weight: 900;
        font-size: 32rpx;
    }

    .detail-war {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .public {
            display: flex;
            align-items: center;

            .public-icon {
                width: 40rpx;
                height: 40rpx;
                margin-right: 10rpx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .public-status {
                .public-status-text {
                    font-size: 28rpx;
                }
            }
        }
    }

    .list-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20rpx 0;

        .list-top-left {
            .title {
                font-size: 30rpx;
                font-weight: 900;
                margin-bottom: 10rpx;
            }
        }
    }

    .b-box {
        margin-top: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .address {
            font-size: 25rpx;
        }

        .list-top-right {
            display: flex;
            align-items: center;

            .d-icon {
                width: 30rpx;
                height: 30rpx;
                margin-right: 10rpx;

                image {
                    width: 30rpx;
                    height: 30rpx;
                }
            }

            .km {
                font-size: 25rpx;
            }
        }
    }

    .d-item {
        display: flex;
        align-items: center;

        .d-number {
            margin-left: 15rpx;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            padding-bottom: 30%;
        }
    }

    .battery-two,
    .b-middle {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .battery-one {
        margin: 20rpx 0 5rpx 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .battery {
        background-color: #e2e2e2;
        padding: 20rpx 0;


        .battery-number {

            .k-number,
            .k-title {
                font-size: 30rpx;
                color: #222;
                text-align: center;
            }
        }

        .b-left {
            writing-mode: vertical-rl;
            /* 垂直排列，从右到左 */
            font-size: 25rpx;
            font: 1;
        }

        .b-middle {
            flex: 3;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .b-right {
            flex: 1;
        }
    }

}

.more-left {
    font-size: 34rpx;
    font-weight: 700;
    color: #e4ab8a;
}

text {
    font-size: 25rpx;
}

/* 容器样式 */
.battery-container {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.tip {
    text {
        font-size: 25rpx;
    }
}

/* 主要布局 */
.battery-two {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    /* 可根据需要调整 */
    background-color: #f8f8f8;
    /* 背景色可选 */
    /* 圆角可选 */
    padding: 20rpx 10px;
    box-sizing: border-box;
}

/* 左侧文字区域 - 10%宽度 */
.b-left {
    flex: 1;
    /* 占1份 */
    max-width: 10%;
    /* 最大10%宽度 */
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    padding-right: 8px;
}

/* 中间电池区域 - 80%宽度 */
.b-middle {
    flex: 8;
    /* 占8份 */
    max-width: 80%;
    /* 最大80%宽度 */
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* 电池项样式 */
.b-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5px;
}

/* 右侧图标区域 - 10%宽度 */
.b-right {
    flex: 1;
    /* 占1份 */
    max-width: 10%;
    /* 最大10%宽度 */
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
</style>